<!--
 * @Author: Nico
-->
<template>
  <div
    class="ui-button flex mr-1 mt-0"
    :class="[
      'mt-' + (info.extension.topMargin && info.extension.topMargin.value),
      'mr-' + (info.extension.rightMargin && info.extension.rightMargin.value),
      'mb-' + (info.extension.bottomMargin && info.extension.bottomMargin.value),
      'ml-' + (info.extension.leftMargin && info.extension.leftMargin.value),
    ]"
  >
    <!-- <Button type="primary">主要按钮</Button> -->
    <!-- {{ info.extension.backMenu.value }} -->
    <van-button
      :ref="info._id"
      v-ui-ref="vSetRef"
      :class="{ hidden: conditionProperty.hidden || info.extension.hidden.value }"
      :disabled="conditionProperty.disabled || info.extension.disabled.value"
      :plain="info.extension.plain.value"
      :round="info.extension.round.value"
      :size="info.extension.size.value"
      :square="!info.extension.round.value"
      :type="info.extension.type.value"
      @click="onClick"
    >
      <vui-icon
        v-if="info.extension.icon.value"
        :icon="info.extension.icon.value"
        :style="{ color: info.extension.color || info.extension.color.value }"
      />
      <!-- {{ info.name ? info.name : '' }} -->
      <template v-if="info.extension.value.value">
        <span :style="{ color: info.extension.color.value }">{{ info.extension.value.value }}</span>
      </template>
    </van-button>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { Button, Icon } from 'vant'
  import { UiMixin, RefsInjectMixin } from '@ve/mixin'

  export default defineComponent({
    name: 'UiPdaButton',
    components: {
      [Button.name]: Button,
      [Icon.name]: Icon,
    },
    mixins: [UiMixin, RefsInjectMixin],
    data() {
      return {
        conditionProperty: {
          disabled: false,
          hidden: false,
        },
      }
    },
    methods: {
      //单击
      onClick() {
        console.log(this.info)
        if (!this.getHasPreview) {
          console.log('预览模式不运行 onClick')
          return
        }
        if (this.info.extension.backMenu && this.info.extension.backMenu.value) {
          this.$router.push('/menu')
          return
        }
        this.$store.dispatch('tmp/setButtonId', this.info._id)
        this.runEventTask('onClick')
      },
    },
  })
</script>
<style scoped>
  .van-button--primary {
    background: rgb(21, 39, 119) !important;
  }
  .van-button--plain.van-button--info {
    border: 1px solid darkgray !important;
    background: #fff !important;
    color: dark !important;
  }
</style>
